<template>
  <div id="wrap">
    <div
      id="linecharts"
      style="width: 1200px; height: 400px; background: skyblue"
    ></div>
  </div>
</template>
<script>
export default {
  name: 'pie',
  props: {
    dateArr: {},
    webArr: {},
    javaArr: {},
    desArr: {}
  },
  mounted () {
    // this.lineInit()
  },
  watch: {
    dateArr () {
      var xarr = [...this.dateArr]
      console.log(xarr)
      this.lineInit()
    }
  },
  methods: {
    lineInit () {
      var lineChart = this.$echarts.init(document.getElementById('linecharts'))
      // 折线图的配置项
      const option = {
        title: {
          text: '专业课程每日新增数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['前端', '后端', '视觉设计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Array.from(this.dateArr)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '前端',
            type: 'line',
            stack: 'Total',
            data: this.webArr
          },
          {
            name: '后端',
            type: 'line',
            stack: 'Total',
            data: this.javaArr
          },
          {
            name: '视觉设计',
            type: 'line',
            stack: 'Total',
            data: this.desArr
          }
        ]
      }

      lineChart.setOption(option)
    }
  }
}
</script>
<style lang="less"></style>
